<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--准备好一个"容器"-->

    <div id="test"></div>
    <br/><br/><br/>
    <div id="test2"></div>

    <!--引入库-->
    <script type="text/javascript" src="../new_js/react.development.js"></script>
    <script type="text/javascript" src="../new_js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">





        class Count extends React.Component {

            constructor(props) {
                super(props);
                console.log("Count-Constructor，构造器");

                this.state = {
                    count: 0
                }
            }



            add = () => {
                const { count } = this.state;

                this.setState({ count: count + 1 });
            }


            unmount = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }


            force = () => {
                this.forceUpdate();
            }



            //使state的值，在任何时候都取决于props
            static getDerivedStateFromProps(props,state){
                console.log("初始化状态",state);
                console.log("传入的属性",props);
                console.log("Count-GetDerivedStateFromProps，属性派生状态");  
                //返回转态对象或者null
                //无论怎么更改都为108
                //return {count:108};
                //return props;
                return null;
            }


            getSnapshotBeforeUpdate(){
                console.log("Count-GetSnapshotBeforeUpdate，快照");
                return {shikimagi:"烟烟罗"};     
            }



            //组件挂载完毕
            componentDidMount() {
                console.log("Count-ComponentDidMount，组件挂载完毕");
            }

            //组件即将卸载
            componentWillUnmount() {
                console.log("Count-ComponentWillUnmount，组件即将卸载");
            }

            //组件是否应该被更新
            shouldComponentUpdate() {
                console.log("Count-ShouldComponentUpdate，组件是否应该被更新");
                return true;
            }

            //组件更新完毕
            componentDidUpdate(prevProps, prevState, snapshot){
                //prevProps, prevState, snapshot分别为更新之前的props和state，getSnapshotBeforeUpdate的返回值
                console.log("Count-ComponentDidUpdate，组件更新完毕",prevProps, prevState, snapshot);
            }

            render() {
                console.log("Count-Render，组件渲染");
                const { count } = this.state;
                return (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.unmount}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                );
            }
        }






        //2.渲染虚拟DOM到页面
        ReactDOM.render(<Count name='铃鹿御前' count='199'/>, document.getElementById('test2'));
    </script>

</body>

</html>